<html data-ng-app="jsGallery">
<head>
    <link type="text/css" rel="stylesheet" href="/css/main.css"/>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css"/>
    <link rel="icon" type="image/png" href="img/Acorn256.png"/>
    <script type="text/javascript" src="js/jquery-2.1.0.js"></script>
    <script type="text/javascript" src="js/jssor.core.js"></script>
    <script type="text/javascript" src="js/jssor.utils.js"></script>
    <script type="text/javascript" src="js/jssor.slider.js"></script>
    <!--<script type="text/javascript" src="js/jssorSetup.js"></script>-->
    <script type="text/javascript" src="js/angular.js"></script>
    <script type="text/javascript" src="js/angular-animate.js"></script>
    <script type="text/javascript" src="js/galleryJs.js"></script>
    <title>Achievement Gallery</title>
</head>

<body ng-controller="photoController" class="backface-visibility">
<div align="center">
    <button type="button" class="btn btn-success" style="width: 75% !important; z-index: 10000"
            ng-click="toggleTeamScore()">Toggle Team Score
    </button>
</div>
<div class="container">
    <div class="container" style="position: fixed">
        <div class="animate-show" align="middle" ng-show="showTeamScore">
            <table class="acheivement mytable" width="75%" align="middle">
                <thead>
                <tr>
                    <td align="center" width="15%">Team</td>
                    <td align="center" width="85%">Score</td>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="teamD in teamData">
                    <td align="center">{{teamD.group}}</td>
                    <td>
                        <div style="float:left">
                            <img ng-repeat="i in getNumber(teamD.positive) track by $index" src="img/star.gif"/>
                        </div>
                        <div style="float:right">
                            <img ng-repeat="i in getNumber(teamD.negative) track by $index" src="img/star2.gif"/>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div ng-show="noAchievements" align="middle">
        <h1>You have no achievements... yet</h1>
    </div>
    <div class="animate-show" class="all-achievements" ng-hide="showTeamScore">
        <div ng-repeat="(title, photoData) in photos" align="middle">
            <div><h2 class="earned-achieve" align="middle">{{translateTitle(title)}}</h2></div>
            <div style="position: relative; width: 700px; height: 180px; overflow: hidden" id="{{title}}">
                <div class="photos" u="slides"
                     style="width: 500px; height: 130px; cursor: move; position: absolute; left: 100px; top: 50px; overflow: hidden;">
                    <div ng-repeat="ph in photoData">
                        <img u=image src="{{ph.blobdata}}"/>
                    </div>
                    <!--<div class="photo"><img src=<%=Helper.getImgEncoded(lockedEntity)%>></div>-->
                    <!-- bullet navigator container -->
                </div>
                <div u="navigator" class="jssorb01" style="position: absolute; bottom: 16px; right: 10px;">
                    <!-- bullet navigator item prototype -->
                    <div u="prototype" style="POSITION: absolute; WIDTH: 12px; HEIGHT: 12px;"></div>
                </div>
                <!-- Arrow Left -->
            <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; bottom: 10px; left: 230px">
            </span>
                <!-- Arrow Right -->
            <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; bottom: 10px; right: 230px">
            </span>
            </div>
        </div>
    </div>
</div>
<div class="loader" ng-show="loading"></div>
</body>
</html>